<template>
  <div id="app">
    <TodoAdd
      @chuan-val="addTodo"
      @toggle-all="toggleAllTodos"
      :isAllComplated="isAllComplated"
    />
    <TodoList
      :list="
        f === 'Active'
          ? activedTodos
          : f === 'Complated'
          ? complatedTodos
          : todos
      "
      @delete="deleteTodo"
      @toggle="toggleTodo"
      @updata-todo="updataTodo"
    />
    <TodoFilter
      :left="activedTodos.length"
      @change-filter="f = $event"
      :f="f"
      @clear="clear"
    />
  </div>
</template>

<script>
// import HelloWorld from "./components/HelloWorld.vue";
import TodoAdd from "./components/TodoAdd.vue";
import TodoList from "./components/TodoList.vue";
import TodoFilter from "./components/TodoFilter.vue";

export default {
  name: "App",
  components: {
    // HelloWorld,
    TodoAdd,
    TodoList,
    TodoFilter,
  },
  data: function () {
    return {
      todos: JSON.parse(window.localStorage.getItem("todos")) || [],
      f: "All",
    };
  },
  computed: {
    isAllComplated: function () {
      return this.todos.every((o) => o.complated);
    },
    activedTodos: function () {
      return this.todos.filter((o) => !o.complated);
    },
    complatedTodos: function () {
      return this.todos.filter((o) => o.complated);
    },
  },
  watch: {
    todos: function (n) {
      window.localStorage.setItem("todos", JSON.stringify(n));
    },
  },
  methods: {
    addTodo: function (text) {
      this.todos = [
        ...this.todos,
        {
          id: this.todos.length
            ? Math.max(...this.todos.map((o) => o.id)) + 1
            : 1,
          complated: false,
          text,
        },
      ];
    },
    toggleTodo: function ({ id, complated }) {
      this.todos = this.todos.map((o) => {
        if (o.id === id) {
          return { ...o, complated };
        } else {
          return o;
        }
      });
    },
    deleteTodo: function (id) {
      this.todos = this.todos.filter((o) => o.id !== id);
    },

    toggleAllTodos: function (complated) {
      this.todos = this.todos.map((o) => ({ ...o, complated }));
    },
    clear: function () {
      this.todos = this.activedTodos;
    },
    updataTodo: function ({ id, text }) {
      this.todos = this.todos.map((o) => {
        if (o.id === id) {
          return { ...o, text };
        } else {
          return o;
        }
      });
    },
  },
};
</script>



<style lang="less">
#app {
  width: 300px;
  background: lightblue;
  margin: 0 auto;
}
// lang="less" 使用less 语法
// #app {
//   font-family: Avenir, Helvetica, Arial, sans-serif;
//   -webkit-font-smoothing: antialiased;
//   -moz-osx-font-smoothing: grayscale;
//   text-align: center;
//   color: #2c3e50;
//   margin-top: 60px;
//   img {
//     width: 50px;
//   }
// }
</style>
